import React, { useState } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqregister } from '../../http/api'
import './Register.less'
const Register = (props) => {
  let [user, setUser] = useState({ phone: "", nickname: '', password: '' });
  let onRegister = async () => {
    if (user.phone === '' || user.password === '' || user.nickname === '') {
      Toast.show({ content: '不能为空' });
      return;
    }
    let { data: res } = await reqregister(user);
    if (res.code === 200) {
      Toast.show({ content: '注册成功' });
      props.history.push('/login');
    }
  }
  return (
    <div className='login'>
      <Header title='注册' back></Header>
      <div className="loginBox">
        <div>{JSON.stringify(user)}</div>
        <h2>注册</h2>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='username'>
            <Input placeholder='请输入手机号' clearable value={user.phone} onChange={(v) => setUser({ ...user, phone: v })} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable value={user.nickname} onChange={(v) => setUser({ ...user, nickname: v })} />
          </Form.Item>
          <Form.Item
            label='密码'
            name='password'
          >
            <Input
              placeholder='请输入密码'
              clearable
              type='password'
              value={user.password}
              onChange={(v) => setUser({ ...user, password: v })}
            />
          </Form.Item>
        </Form>
        <Button onClick={() => onRegister()} block shape='rounded' color='primary'>
          注册
        </Button>
      </div>

    </div>
  )
}
export default Register